<div class="flex items-center justify-between flex-wrap min-h-16 pl-3 pr-4 py-2.5 border-b border-b-divider-subtle">
  <div class="shrink-0 rounded-full w-8 h-8 flex justify-center items-center cursor-pointer hover:bg-hover-bg"
    (click)="close()"
  >
    <i class="ri-arrow-left-line text-text-tertiary hover:text-text-secondary"></i>
  </div>
  <div class="flex items-center justify-start flex-1 mr-2">
    <div class="inline-block" data-state="closed">
      <div class="flex items-center ml-1 px-2 py-0.5 rounded-lg hover:bg-state-base-hover select-none cursor-pointer">
        @if (document()) {
          <knowledge-doc-id [doc]="document()" />
        }
      </div>
    </div>
  </div>
  <div class="flex items-center flex-wrap">
    <div
      class="flex items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-sm backdrop-blur-[5px] relative z-20"
    >
      <button
        type="button"
        class="inline-flex items-center px-2.5 py-2 rounded-l-lg hover:bg-state-base-hover disabled:cursor-not-allowed disabled:hover:bg-transparent"
        (click)="addChunk()"
      >
        <i class="ri-file-add-line"></i>
        <span class="text-[13px] leading-[16px] font-medium capitalize px-0.5 ml-0.5 text-components-button-secondary-accent-text">
          {{ 'PAC.Knowledgebase.AddChunk' | translate: {Default: 'Add Chunk'} }}
        </span>
      </button>
     <!--  <div class="relative">
        <div>
          <button
            class="group inline-flex items-center bg-components-button-secondary-bg px-3 py-2 rounded-lg text-base font-medium hover:bg-components-button-secondary-bg-hover hover:border-components-button-secondary-border-hover focus:outline-none !p-2 !rounded-l-none !rounded-r-lg !hover:bg-state-base-hover backdrop-blur-[5px] disabled:cursor-not-allowed disabled:bg-transparent disabled:hover:bg-transparent"
            type="button"
            aria-expanded="false"
          >
            <div class="flex justify-center items-center">
              <i class="ri-arrow-down-s-line"></i>
            </div>
          </button>
        </div> 
      </div>-->
    </div>
    
    <div class="w-[1px] h-4 mx-2 bg-divider-regular"></div>

    <div class="flex items-center px-3 py-2 rounded-lg border-[0.5px] ">
      @if (docEnabled()) {
        <span class='w-2 h-2 mr-1 rounded-[2.5px] shadow-md bg-emerald-500 flex'></span>
        <span class="">{{ 'PAC.Knowledgebase.Available' | translate: {Default: 'Available'} }}</span>
      } @else {
        <span class='w-2 h-2 mr-1 rounded-[2.5px] shadow-md bg-gray-300 flex'></span>
        <span class="">{{ 'PAC.Knowledgebase.Disabled' | translate: {Default: 'Disabled'} }}</span>
      }
      
      <div class="flex justify-between items-center ml-1.5">
        <ngm-slide-toggle [(ngModel)]="docEnabled" (ngModelChange)="updateDoc({disabled: !$event})"/>
      </div>
    </div>
    
  </div>
</div>

<div class="grow flex justify-between overflow-hidden">
  <div class="grow shrink-1 flex flex-col justify-start overflow-hidden">
    <div class="flex justify-between items-center px-8 py-4">
      <div>{{'PAC.Knowledgebase.Chunks' | translate: {Default: 'Chunks'} }}: {{total()}} {{'PAC.Knowledgebase.Pieces' | translate: {Default: 'Pieces'} }}</div>

      <div class="flex gap-2">
        <div class="relative w-52">
          <i class="ri-search-line absolute left-2 top-1/2 -translate-y-1/2 text-components-input-text-placeholder"></i>
          <input class="w-full py-[7px] bg-components-input-bg-normal border border-transparent text-components-input-text-filled hover:bg-components-input-bg-hover hover:border-components-input-border-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:text-components-input-text-placeholder appearance-none outline-none caret-primary-600 rounded-lg system-sm-regular px-[26px]"
            [placeholder]="'PAC.Knowledgebase.Search' | translate: {Default: 'Search'}"
            [ngModel]="search()"
            (ngModelChangeDebounced)="onSearch($event)"
          >
          @if (search()) {
            <div class="absolute right-2 top-1/2 -translate-y-1/2 group p-[1px] cursor-pointer"
              (click)="search.set(null)"
            >
              <i class="ri-close-circle-fill text-text-quaternary cursor-pointer group-hover:text-text-tertiary"></i>
            </div>
          }
        </div>
      </div>
    </div>

    <div class="px-4 overflow-auto"
      waIntersectionObserver
      waIntersectionThreshold="0.5">
      <ul class="example-list-wrapping m-2">
        @for (chunk of chunks(); track chunk.id; let i = $index; let last = $last) {
          <li class="relative w-full px-3 rounded-xl group/card pt-2.5 pb-2 hover:bg-black/5 dark:hover:bg-white/10">

            <div class="h-5 relative flex items-center justify-between">
              <div class="flex items-center gap-x-2">
                <div class="flex items-center text-text-tertiary">
                  <i class="ri-text-block mr-1"></i>
                  <div class="system-xs-medium">{{'PAC.Knowledgebase.Chunk' | translate: {Default: 'Chunk'} }}-{{i + 1}}</div>
                </div>
                <div class="text-text-quaternary system-xs-medium">·</div>
                <div class="text-text-tertiary system-xs-medium">{{chunk.content.length}} {{'PAC.Knowledgebase.Characters' | translate: {Default: 'Characters'} }}</div>
                <div class="text-text-quaternary system-xs-medium">·</div>
                <!-- <div class="text-text-tertiary system-xs-medium">0 召回次数</div> -->
              </div>
              <div class="flex items-center">
                <div class="flex items-center flex-row-reverse gap-1">
                  @if (chunk.metadata?.enabled) {
                    <span class='w-2 h-2 mr-1 rounded-[2.5px] shadow-md bg-emerald-500 flex'></span>
                    <span class="text-sm text-text-tertiary system-xs-regular">
                      {{'PAC.Knowledgebase.Enabled' | translate: {Default: 'Enabled'} }}
                    </span>
                  } @else {
                    <span class='w-2 h-2 mr-1 rounded-[2.5px] shadow-md bg-gray-300 flex'></span>
                    <span class="text-sm text-text-tertiary system-xs-regular">
                      {{'PAC.Knowledgebase.Disabled' | translate: {Default: 'Disabled'} }}
                    </span>
                  }
                </div>
              </div>
            </div>

            <div class="absolute -top-2 -right-2.5 z-20 hidden group-hover/card:flex items-center gap-x-0.5 p-1 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-md backdrop-blur-[5px]">
              <div class="shrink-0 w-6 h-6 flex items-center justify-center rounded-lg hover:bg-state-base-hover cursor-pointer"
                (click)="editChunk.set(chunk)">
                <i class="ri-edit-line text-text-tertiary"></i>
              </div>
              <div class="shrink-0 w-6 h-6 flex items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive cursor-pointer group/delete"
                (click)="deleteChunk(chunk)"
              >
                <i class="ri-delete-bin-3-line"></i>
              </div>
              <div class="w-[1px] mx-2 h-3.5 bg-divider-deep"></div>
              <div class="flex items-center">
                <ngm-slide-toggle [ngModel]="chunk.metadata?.enabled" (ngModelChange)="enableChunk(chunk, $event)"/>
              </div>
            </div>
          
            <span class="text-sm line-clamp-3 text-zinc-500" [class.opacity-50]="chunk.metadata?.disabled">{{chunk.content}}</span>
          </li>
          @if (!last) {
            <div class="w-full px-3"><div class="w-full h-[0.5px] bg-divider-subtle my-1"></div></div>
          }
        }

        <div (waIntersectionObservee)="onIntersection()" class="p-4"></div>
      </ul>
    </div>
  </div>

  @if (sideExpand() || editChunk()) {
    <div class="shrink-0 w-[300px] md:w-[400px] lg:w-[500px] flex flex-col">
      <div class="flex items-center justify-between pt-3 pr-3 pl-4">
        <div class="flex flex-col">
          <div class="text-text-primary system-xl-semibold">
            {{ 'PAC.Knowledgebase.EditChunk' | translate: {Default: 'Edit Chunk'} }}
          </div>
          <div class="flex items-center gap-x-2">
            <div class="flex items-center text-text-tertiary ">
              <i class="ri-text-block mr-1"></i>
              <div class="system-xs-medium">{{ 'PAC.Knowledgebase.Chunk' | translate: {Default: 'Chunk'} }}</div>
            </div>
            <div class="text-text-quaternary system-xs-medium">·</div>
            <span class="text-text-tertiary system-xs-medium">736 {{'PAC.Knowledgebase.Characters' | translate: {Default: 'Characters'} }}</span>
          </div>
        </div>
        <div class="flex items-center">
          <div class="w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer" (click)="cancelEdit()">
            <i class="ri-close-line text-text-tertiary"></i>
          </div>
        </div>
      </div>

      <div class="flex grow flex-col gap-y-1 py-3 px-4">
        <div class="break-all overflow-hidden whitespace-pre-line grow">
          <textarea
            class="text-sm disabled:bg-transparent inset-0 outline-none border-none appearance-none resize-none overflow-y-auto h-full w-full pb-6 body-md-regular text-text-secondary tracking-[-0.07px] caret-[#295EFF]"
            placeholder="{{ 'PAC.Knowledgebase.AddContentHere' | translate: {Default: 'Add content here'} }}"
            [ngModel]="editChunk().content"
            (ngModelChange)="updateChunk($event)"
          ></textarea>
        </div>
      </div>

      <div class="flex items-center justify-end p-4 pt-3 border-t-[1px] border-t-divider-subtle">
        <div class="flex items-center gap-x-2">
          <button type="button" class="btn disabled:btn-disabled btn-secondary btn-medium"
            (click)="cancelEdit()"
          >
            <div class="flex items-center gap-x-1">
              <span class="text-components-button-secondary-text system-sm-medium">
                {{'PAC.ACTIONS.Cancel' | translate: {Default: 'Cancel'} }}
              </span>
              <span class="px-[1px] bg-gray-100 rounded-[2.5px] shadow-md text-text-tertiary text-sm">ESC</span>
            </div>
          </button>
          <button type="button" class="btn disabled:btn-disabled btn-primary btn-medium"
            (click)="saveEdit()"
          >
            <div class="flex items-center gap-x-1">
              <span class="text-components-button-primary-text">
                {{'PAC.ACTIONS.Save' | translate: {Default: 'Save'} }}
              </span>
              <div class="flex items-center gap-x-0.5 text-sm">
                <span class="capitalize">⌘</span>
                <span class="">S</span>
              </div>
            </div>
          </button>
        </div>
      </div>
    </div>
  }
</div>

@if (loading()) {
  <ngm-spin class="absolute top-0 left-0 w-full h-full" />
}